<template>
  <el-dialog
    :visible="true"
    :show-close="false"
    :title="$t(title)"
    modal
    width="80%">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
    <el-form-item :label="$t('cArroval.carrier')" prop="carrier">
      <el-select v-model="ruleForm.carrier" :placeholder="$t('m.choose')" size="small">
        <el-option
          v-for="(item,index) in carrier"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div class="bottom">
    <el-button @click="handleClose">{{$t('btn.canel')}}</el-button>
    <el-button type="primary" @click="handleOk">{{$t('btn.ok')}}</el-button>
  </div>
</el-dialog>
</template>

<script>
import { $carApplication } from '@/api/transport'
import { $approval } from '@/api/approval'
import { Notify } from 'vant'

export default {
  props: {
    applyObj: {
      type: Object,
      default() {
        return {}
      }
    },
    isDistribution: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  components: {
    [Notify.Component.name]: Notify.Component
  },
  data() {
    return {
      ruleForm: {
        carrier: ''
      },
      rules: {
        carrier: [ { required: true, message: `${this.$t('m.choose')+this.$t('cArroval.carrier')}`, trigger: 'change' } ]
      },
      carrier:[],
      title: 'cArroval.passed'
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if(!valid) return false
        let vehicleApprovalReq = {
          id: this.applyObj.id,
          flag: 1,
          carrier: this.ruleForm.carrier,
          approver: this.applyObj.approver,
          approvalTime: this.applyObj.approvalTime
        }
        const obj = {
          inputApplyCarReq: this.inputApplyCarReq(this.applyObj),
          vehicleApprovalReq
        }
        if(this.isDistribution === 1) {
          // 分拨
          const obj = {
            id: vehicleApprovalReq.id,
            carrier: vehicleApprovalReq.carrier
          }
          $approval
            .distribution(obj)
            .then(res => {
              if(res.status !== 200) return this.$msg.fail(res.message || res.msg || '该数据状态已改变，请刷新')
              Notify({ type: 'success', message: res.msg || res.message || '分拨成功' })
              setTimeout(() => {
                this.$router.go(-1)
              }, 300)
            })
            .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
        }
        else {
          // 审批
          $approval
            .applyOk(obj)
            .then(res => {
              if(res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
              Notify({ type: 'success', message: res.msg || res.message || '审批成功' })
              setTimeout(() => {
                this.$router.go(-1)
              }, 300)
            })
            .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
        }
      })
    },
    handleClose() {
      this.$emit('handleClose')
    },
    // 获取承运人
    findAllagentCode() {
      $carApplication
        .findAllagentCode()
        .then(res => {
          this.carrier = res.data
        })
        .catch(err => this.$msg.fail(err.message || err.msg || '获取承运人人失败'))
    },
    // 上传回后端数据验证
    inputApplyCarReq(applyObj) {
      return {
        aog: applyObj.aog,
        applicationUnit: applyObj.applicationUnit,
        startStation: applyObj.startStation,
        targetStation: applyObj.targetStation,
        deliveryUnit: applyObj.deliveryUnit,
        deliveryPeople: applyObj.deliveryPeople,
        deliveryPhone: applyObj.deliveryPhone,
        receiveUnit: applyObj.receiveUnit,
        receivePeople: applyObj.receivePeople,
        receivePhone: applyObj.receivePhone,
        spare_phone: applyObj.spare_phone,
        innerGoodsInfoEntityList: applyObj.innerGoodsInfoEntityList,
        id: applyObj.id,
        sparePhone: applyObj.sparePhone
      }
    }
  },
  created() {
    this.findAllagentCode()
    if(this.isDistribution === 1) {
      this.title = '分拨'
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__body {
  padding: 0 15px !important;
}
/deep/.el-dialog {
  border-radius: 5px;
  margin-top: 30vh !important;
}
.bottom {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
}
.el-button {
 flex: 1;
}
</style>